<ng-template #template>
  <div #surveyContainer *ngIf="!!model" [class]="model.getRootCss()" [style]="model.themeVariables" [lang]="model.locale || 'en'" [dir]="model.localeDir">
    <sv-scroll [disabled]="model.rootScrollDisabled">
      <sv-svg-bundle *ngIf="model.needRenderIcons"></sv-svg-bundle>
      <div [class]="model.wrapperFormCss">
        <div *ngIf="!!model.renderBackgroundImage" [class]="model.css.rootBackgroundImage" [style]="model.backgroundImageStyle"></div>
        <form onsubmit="return false;">
          <sv-scroll [disabled]="model.formScrollDisabled">
          <div class="sv_custom_header" [hidden]="model.hasLogo"></div>
          <div [class]="model.css.container">
            <div *ngIf="model.headerView === 'basic' && model.renderedHasHeader" [class]="model.css.header" [survey]="model" sv-ng-survey-header></div>
            <ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'header', needRenderWrapper: false } }"></ng-template>
            <div *ngIf="model.isShowingPage" [class]="model.bodyContainerCss">
              <ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'left' } }"></ng-template>
              <div class="sv-components-column sv-components-column--expandable">
                <ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'center' } }"></ng-template>
                <div [class]="model.bodyCss" [style.maxWidth]="model.renderedWidth" [id]="model.activePage ? model.activePage.id : ''">
                  <ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'contentTop' } }"></ng-template>
                    <ng-container *ngIf="model.activePage">
                        <!-- <sv-ng-page [model]="model.activePage" [survey]="model"></sv-ng-page> -->
                        <ng-template [component]="{ name: model.pageComponent || 'sv-page', data: { model: model.activePage, survey: model } }"></ng-template>
                    </ng-container>
                  <ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'contentBottom' } }"></ng-template>
                  <sv-brand-info *ngIf="model.showBrandInfo"></sv-brand-info>
                </div>
              </div>
              <ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'right' } }"></ng-template>
            </div>
            <ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'footer', needRenderWrapper: false } }"></ng-template>
            <div *ngIf="model.state === 'completed' && model.showCompletedPage" [class]="model.completedCss"
              [innerHtml]="model.processedCompletedHtml | safeHtml"></div>
            <ng-template *ngIf="model.state === 'completed' && model.showCompletedPage" [component]="{ name: 'sv-components-container', data: { survey: model, container: 'completePage' } }"></ng-template>
            <div *ngIf="model.state === 'completedbefore'" [class]="model.completedBeforeCss"
              [innerHtml]="model.processedCompletedBeforeHtml | safeHtml"></div>
            <div *ngIf="model.state === 'loading'" [class]="model.loadingBodyCss" [innerHtml]="model.processedLoadingHtml"></div>
            <div *ngIf="model.state === 'empty'" [class]="model.css.bodyEmpty">{{model.emptySurveyText}}</div>
          </div>
        </sv-scroll>
        </form>
        <sv-notifier [notifier]="model.notifier"></sv-notifier>
      </div>
    </sv-scroll>
  </div>
</ng-template>